<template>
	<view>

		<view class="search-header">
			<!-- #ifdef MP -->
			<view class="sys-head" :style="{ height: statusBarHeight }" v-if="openSysHeight">
				<view :style="{ height: titleHeight }" class="acea-row row-middle">
					<slot name="title"></slot>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<!-- <view style="height: 55rpx;"></view> -->
			<!-- #endif -->
			<view class="acea-row row-center-wrapper search-headerCon">
				<view class="iconfont icon-xiangzuo on" @tap="returnFun" v-if="parameter.return"></view>
				<view style="width: 40rpx;" v-else></view>
				<view class="acea-row row-middle search-box" :style="isMap?'':'width: 85%'">
					<!-- <cityPicker @change="cityChange" :bs="bs" /> -->
					<categoryComp v-model="categoryType" />
					<view class="acea-row row-middle search-ipt" style="padding-left: 10rpx;">
						<text class="kk"></text>
						<input type="text" :placeholder="parameter.placeholder" @input="searchIpt"
							@focus="val=>$emit('@focus',val.detail.value)" v-model="searchKey"
							@confirm="val=>$emit('confirm',val.detail.value)">
							<view @click="$emit('confirm',searchKey)" class="btnSearchto">
								<text class="iconfont  searBtn icon-xiazai5" ></text>
							</view>
					</view>
				</view>

				<view class="search-map" v-if="isMap" @click="toPage('/pages/others/mapFinding/mapFinding')">
					<image src="@/static/images/map_index_icon.png" mode=""></image>
					<view>地图找铺</view>
				</view>
			</view>
		</view>
		<view :style="{height: statusBarHeight}"></view>
		<view :style="{height: '55px'}"></view>
	</view>
</template>

<script>
	import {
		getCityApi
	} from "@/api/api.js";
	import {
		MapAllApi
	} from '@/api/subletOfShop.js'
	import {
		showLoading
	} from '@/filters/commFilter.js'
	import {
		toPage
	} from "@/filters/commFilter.js"
	import categoryComp from '../categoryComp.vue'
	var app = getApp();
	export default {
		name: "searchNavbar",
		data() {
			return {
				navH: "",
				searchKey: '',
				statusBarHeight: 0,
				titleHeight: 0,
				listdata: [],
				cityData: [],
				show: true,
				cityIndex: [0, 0, 0],
				cityTree: [],
				amapPlugin: {},
				QQMapWX: {},
				latitude: '',
				longitude: '',
				categoryType: '',
			};
		},
		components: {
			categoryComp
		},
		props: {
			setting: {
				type: Object,
			},
			openSysHeight: {
				type: Boolean,
				default: false
			},
			bs: {
				type: String,
				default: 'mapfind'
			},
			parameter: {
				type: Object,
				default: {
					'return': 0,
					placeholder: '搜索'
				}
			},
			city: {
				type: String,
				default: '全部'
			},
			isMap: {
				type: Boolean,
				default: true
			},
			openseach: {
				type: Boolean,
				default: true
			},
			
		},
		beforeMount: function() {
			this.navH = app.globalData.navHeight
		},
		computed: {
			chooseLocation() {
				return this.$chooseLocation;
			}
		},
		watch: {
			chooseLocation: {
				handler() {
					console.log('chooseLocation', this.chooseLocation)
				},
				immediate: true,
				deep: true
			},
			"setting.categoryType": {
				handler() {
					this.categoryType = this.setting.categoryType;
				},
				immediate: true
			},
			categoryType() {
				console.log("????",this.categoryType)
				this.$set(this.setting,'categoryType', this.categoryType)
				this.$emit("toSetting",{...this.setting})
				// this.setting.categoryType = this.categoryType
			}
		},
		mounted: function() {
			// this.setClass();
			var pages = getCurrentPages();
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.statusBarHeight = (Number(menuButtonInfo.bottom) + 5) + 'px';
			this.titleHeight = menuButtonInfo.height + 'px';
			if (pages.length < 1)
				this.parameter.return = 0
		},
		methods: {
			toPage,
			searchIpt(e) {
				// if (this.openseach) {
				// 	this.listdata = []
				// 	if (e.detail.value.length > 0) {
				// 		showLoading()
				// 		uni.$u.debounce(this.$emit('search'), 1000);
				// 		uni.$u.debounce(this.getList(e.detail.value), 1000);
				// 	}
				// }
				this.$emit('inputs', e.detail.value)
			},
			cityChange(e) {
				this.$emit('cityChange')
			},
			returnFun: function() {
				uni.navigateBack({
					delta: 1
				}); // var pages = getCurrentPages();
				// wx.navigateBack({
				//   delta: pages.length-2
				// });
			},
			columnchange(e) {
				const {
					column,
					value
				} = e.detail ? e.detail : 0;
				this.cityIndex[column] = value
				//对数据进行处理
				//省份发生变化
				let city = column == 0 ? (this.cityTree[value].child ? this.cityTree[value].child : []) :
					this.cityData[1]
				//当省份或者市改变 区也会发生改变
				let county = column == 0 ? (city[0].child) : (column == 1 ? city[value].child : this
					.cityData[2])
				this.cityData = [this.cityTree, city, county];
			},
			//点击确定
			bindChange(e) {
				const {
					value
				} = e.detail;
				this.$emit('changeCity', this.cityData[1][value[1]]);
			}
		}
	}
</script>

<style lang="scss">
	.search-header {
		padding: 0rpx 15rpx;
		position: fixed;
		background: #EE212D;
		top: 0;
		/*  #ifdef  H5  */
		top: calc(88rpx + constant(safe-area-inset-top));
		top: calc(88rpx + env(safe-area-inset-top));
		/*  #endif  */
		left: 0;
		z-index: 999;
		width: 100%;
	}

	.sys-head {
		display: flex;
		align-items: flex-end;
		justify-content: center;

		background-color: #EE212D;

		.titleSlot {
			color: #fff;
		}

	}

	.search-headerCon {
		// position: absolute;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		padding-bottom: 20rpx;
		paddfing-top: 20rpx;
	}

	.search-map {
		font-size: 22rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;

		image {
			width: 40rpx;
			height: 36rpx;
		}
	}

	.icon-xiangzuo2 {
		color: #000;
		font-weight: bold;
		font-size: 40rpx;
		// width: 100rpx;
		height: 56rpx;
		line-height: 54rpx;
		// position: absolute;
		// top: 50%;
		// left: 16rpx;
		// transform: translateY(-50%);
	}

	.icon-xiangzuo {
		color: #ffffff;
		// position: absolute;
		font-size: 40rpx;
		// left: 0rpx;
		// width: 100rpx;
		// height: 56rpx;
		// line-height: 54rpx;
		// top: 50%;
		// transform: translateY(-50%);
	}

	.icon-xiangzuo.on {
		color: #fff;
	}

	.search-box {
		width: 540rpx;
		height: 70rpx;
		opacity: 1;
		border-radius: 36rpx;
		background: rgba(255, 255, 255, 1);
		padding: 0rpx 0rpx 0rpx 32rpx;
		margin: 0 24rpx;

		.city {
			max-width: 142rpx;
			// margin-right: 26rpx;
			// padding-right: 32rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			// &::after {
			// 	display: block;
			// 	content: '';
			// 	width: 26rpx;
			// 	height: 16rpx;
			// 	background-image: url('/static/images/city_sanjiao.png');
			// 	background-size: 100% 100%;
			// 	background-repeat: no-repeat;
			// 	position: absolute;
			// 	right: 0;
			// 	top: 50%;
			// 	margin-top: -8rpx;
			// }
		}

		.search-ipt {
			color: rgba(166, 166, 166, 1);
			width: 68%;
			border-left: 1px solid rgba(229, 229, 229, 1);

			.searBtn {
				font-size: 32rpx;
			}

			input {

				width: 77%;
				font-size: 26rpx;
			}
		}
	}

	.search-box.search-box-w {
		width: 604rpx;
	}

	.list {
		background-color: #fff;
		position: fixed;
		top: 180rpx;
		z-index: 99999;
		width: 78%;
		left: 18%;

		.item {
			padding: 20rpx;
		}
	}

	.scroll-Y {
		height: 300rpx;
	}
	.btnSearchto{
		padding-left: 40rpx;
	}
</style>